<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        更新:{{n}}
        <button @click="n++">点我n++</button>
        <div id="outer">outer测试beforeMount</div>
        <button @click="remove">销毁</button>
    </div> 
    <script src="plugins/vue2.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                n:1
            },
            methods:{
                remove(){
                    //走销毁方法
                    this.$destroy()
                }
            },
            //数据代理尚未开始
            beforeCreate() {
                //console.log(this) ;//ok - vue实例
                //无法访问vm身上的data
                console.log('beforeCreate...',this.n);//undefined
            },
            //数据代理已经完成 - 访问vm实例中的东西
            created() {
                console.log('created...',this.n)
            },
            beforeUpdate() {
                console.log('beforeUpdate...',this.n);//应该发生变化了,但是页面应该尚未同步
                //暂停一下程序            
                //debugger
            },

            //页面呈现的仍然是vue尚未编译好的dom结构
            beforeMount() {
                //this.$el获取页面上的真实的dom
                console.log('beforeMout...',this.$el)
                //对所有的DOM操作不会奏效
                document.getElementById("outer").innerHTML='xxx'
                debugger
            },
            //使用频率比较的钩子函数
            //虚拟DOM已经转成了真实的DOM
            mounted(){
                //可以操作真实的dom
                //document.getElementById("outer").innerHTML='xxx'
                //发送请求到后端....
                console.log('mounted',this.n,this.$el)
            },
            updated() {
                //debugger
                //vm身上的n的改变已经同步到真实dom上去了
                console.log('updated...')
               
            },
            destroyed() {
                console.log('destroyed销毁...')
            },
        });
    </script>
</body>
</html>